import React from 'react'
import '../todo.css'
// ===================================================================== Temp
// ===================================================================== Declare
const { $Lazy, $http, $fn } = window
// ===================================================================== Lazy
const Modal 	= $Lazy.state(()=>import('@antd/modal'))
const Input 	= $Lazy.load(()=>import('@antd/form/input'))
// ===================================================================== component

const colors = [ '#2cc7ac', '#0F9BCF', '#F89D00', '#FF5656' ]

class Index extends React.Component{
	state = {
		rows: [],
		keys: [],
		back_content: ''
	}
	
	model = {}
	
	open = (rows, keys) => {
		this.setState({rows, keys})
		this.modal.open()
	}

	render(){
		const { rows, keys, back_content } = this.state
		return <>
			<Modal
				title	= '批量处理待办'
				width 	= {700}
				height  = {500}
				okText	= '确认'
				noCancel
				onRef	= { ref => this.modal = ref }
				isFullScroll
				onOk	= { () => {
					$http.submit(null, 'work-event/back', {param:{uuids: keys, back_content}}).then(() => {
						$fn.msg.success('处理成功')
						window.refresh.onRefresh()
						this.modal.close()
					})
				} }
				onClose	= { () => this.setState({back_content: ''})}
			>
				<div className='todo wh fv'>
					<div className='modal-box r5px ex rel' style={{backgroundColor: '#F7FBFC'}}>
						<div className='abs_full scrollbar oys'>
							{rows.map((v, i) => <div className=' mtb10' key={v.id}>
								<div className='fxmj plr10'>
									<div className='fxm ex'>
										<i className='r100px mr10' style={{width:6,minHeight:6, background: colors[ +v.level - 1] }}></i>
										<span className='omits-1'>{v.title}</span>
									</div>
									<div className='fxm g6'>
										<span className='f12'>{v.created_at}</span>
									</div>
								</div>
								<div style={{ borderBottom: rows.length === i + 1 ? 'unset' : '1px solid #EAF2F4' }} className='fxmj f12 g6 mlr10 pb10'>
									<div className='fxm ml15'>
										<span>发起部门：{v.from_depart}</span>
										<span className='mlr10'>/</span>
										<span>待办类型：{v.event_type_name}</span>
									</div>
									<span>由 <b className='g3'>{v.from_user}</b> 创建</span>
								</div>
							</div>)}
						</div>
					</div>
					<div className='fv ptb10'>
						<div>
							<i style={{color: 'red', marginRight:'3px'}}>*</i>
							<span className='b'>反馈内容</span>
						</div>
						<Input p='请输入' outer value={back_content} mode='textarea' onChanged={({value}) => this.setState({back_content: value})} />
					</div>
				</div>
			</Modal>
		</>
	}
}

export default Index